<template>
    <div>
        <el-popover trigger="manual"
                    ref="popover"
                    @show="()=>openEWvent()" v-model="visible" placement="top-start"
                    width="500">
            <section>
                <div style="max-height: 400px;overflow-y: auto">
                    <div>
                        <el-form size="mini" :inline="true"   @submit.native.prevent>
                            <el-form-item label="登录名 " desc="" prop="username"
                                          disabled="false">
                                <el-input
                                        style="width:66px"
                                        @keyup.enter.native="handleQuery"
                                        size="mini" placeholder="" v-model="queryParams.userName" clearable />
                            </el-form-item>
                            <el-form-item label="用户名称" desc="" prop="realName"
                                          disabled="false">
                                <el-input
                                        style="width:66px"
                                        @keyup.enter.native="handleQuery"
                                        size="mini" placeholder="" v-model="queryParams.realName" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="">搜索
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table :data="dataList" size="mini" border
                    ref="tableDom"
                              @selection-change="rows=>selectRows=rows"
                              @row-click="row=>{
                               tableRowClickOnece(row,'tableDom')
                              }"
                              @row-dblclick="row=>{
                                 triggerSave(row)
                              }"
                    >
                        <el-table-column
                                width="50px" type="selection">
                        </el-table-column>
                        <el-table-column
                                label="登录名称" prop="userName">
                            <template slot-scope="scope">
                                {{scope.row.userName}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="用户名称" prop="realName">
                            <template slot-scope="scope">
                                {{scope.row.realName}}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-pagination
                        size="mini"
                        style="padding-top: 10px;padding-bottom: 10px;"
                        :page-size="queryParams.pageSize"
                        :current-page.sync="queryParams.pageNum"
                        layout="prev, pager, next"
                        :total="total"
                        @size-change="(pageSize)=>{$data.queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
                        @current-change="(pageNum)=>{$data.queryParams.pageNum=pageNum;dataList=[];getInfoList();}"
                ></el-pagination>
                <div style="margin-top: 10px;">
                    <el-button size="mini" @click="()=>{
                        visible=false
                        }">取消
                    </el-button>
                    <el-button size="mini" type="primary" @click="()=>triggerSave()">保存</el-button>
                </div>
            </section>
            <el-input :size="$props.size" @click.native="()=>{
                 visible=true
            }" :value="$props.userName" slot="reference"
                      :placeholder="$attrs['placeholder']||'用户'"
            ></el-input>
        </el-popover>
    
    </div>
</template>
<script>
  import * as hrmUserApi from '@/apis/hrmuser.api.js';
  import useTable from '@/hooks/useTable';
  
  export default {
    props: {
      size: {
        type: [String, Number],
      },
      userId: {
        type: [String, Number],
      },
      userName: {
        type: [String, Number],
      },
    },
    data() {
      const {tableRowClickOnece}=useTable()
      return {
        tableRowClickOnece,
        visible: false,
        dataList: [],
        queryParams: {
          pageSize: 10,
          pageNum: 0,
        },
        total: 0,
        selectData: undefined,
        selectRows: [],
      };
      
    },
    mounted() {
    
    },
    methods: {
      handleQuery() {
           this.queryParams.pageNum=1
          this.getInfoList()
      },
      
      nodeClick(node) {
        this.selectData = node;
      },
      triggerSave(_row) {
        var row = _row||this.selectRows && this.selectRows[0];
        this.$emit('data', row);
        this.$emit('update:userId', row && row.accountId);
        this.$emit('update:userName', row && row.realName);
        this.visible = false;
        document.documentElement.removeEventListener('click', this.closeDialog);
        
        
      },
      async getInfoList() {
        var result = await hrmUserApi.getHrmUserList({
          ...this.queryParams,
          pageSize: this.queryParams.pageSize,
          pageNum: this.queryParams.pageNum,
        });
        this.dataList = result && result.data || [];
        this.total = result && result.count || 0;
        
        
      },
      closeDialog(e) {
        var target = e.target;
        var self = this;
        var popoverDom = self.$refs['popover'] && self.$refs['popover'].$el;
        if (!(popoverDom && popoverDom.contains(target))) {
          this.visible = false;
          document.documentElement.removeEventListener('click', this.closeDialog);
        }
        
        
      },
      initEvent() {
        
        // 初始化 點擊其他地方 關閉
        document.documentElement.removeEventListener('click', this.closeDialog);
        document.documentElement.addEventListener('click', this.closeDialog);
      },
      openEWvent() {
        this.getInfoList();
        
        this.initEvent();
        
      },
      
    },
    
  };
</script>
